
.clearfix::after{
  display: block;
  content: '';
  clear: both;
}


.main{
  width: 1200px;
  margin: 0 auto;

  .main-nav {
    p {
      color: #969696;
      height: 66px;
      line-height: 70px;
      font-size: 16px;
      padding-left: 26px;
      background: url("../img/home.png") no-repeat 4px center;
      a {
        color: #969696;
        &:hover {
          color: red;
        }
      }
    }
  }

  .main-content {
    h3{
      line-height: 105px;
      font-size: 30px;
      span {
        color: #ff0000;
      }
    }
    .top-bar {
      border-bottom: 3px solid #ff8900;
      font-size: 0;
      .switchBtn {
        display: inline-block;
        vertical-align: top;
        background: none;
        cursor: pointer;
        .front-icon {
          display: block;
          border-radius: 8px;
          line-height: 40px;
          text-align: center;
          width: 135px;
          font-size: 18px;
          color: #000;
          background: #fff;
        }
        span {
          display: block;
          margin: 0 auto;
          width:0 ;
          height: 0;
          border: {
            width: 6px 4px;
            color: transparent;
            style: solid dotted dotted dotted;
          }
        }
      }
      .active {
        .front-icon {
          background: #ff9500;
          color: #fff;
        }
        span {
          border-color: #ff9500 transparent transparent transparent;
        }
      }

      .mid-border {
        display: inline-block;
        width: 1px;
        height: 15px;
        background: #cac8d5;
        margin: 14px 21px 0 36px;
      }
    }
    .search-content {
      min-height: 140px;
      .content-box {
        float: left;
        width: calc(100% / 3 - 40px);
        height: 115px;
        margin: 25px 30px 0;
        border-radius: 8px;
        box-shadow: 0 0 2px 1px #f6f6f6;
        &:nth-child(3n+2) {
          margin: 25px 0 0;
        }
        div {
          float: left;
        }
        .show-zone {
          img {
            height: 103px;
            margin: 6px 0;
          }
        }
        .brief-introduce {
          width: 125px;
          padding: 10px 20px 0 5px;
          height: 105px;
          h5 {
            line-height: 40px;
            font-size: 25px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            a:hover {
              color: red;
              text-decoration: underline;
            }
          }
          .labels {
            font-size: 0;
            span {
              line-height: 34px;
              font-size: 19px;
              a{
                color: #4e4e4e;
                &:hover {
                  color: red;
                  text-decoration: underline;
                }
              }
            }
            span + span {
              margin-left: 4px;
            }
          }
          .popularity {
            line-height: 26px;
            font-size: 14px;
            color: #939393;
          }
        }
        .startBtn {
          a {
            display:block;
            margin: 38px auto 0;
            border: 1px solid #ff9500;
            height: 36px;
            line-height: 36px;
            width: 92px;
            border-radius: 8px;
            text-align: center;
            background: none;
            font-size: 18px;
            color: #ff9500;
            &:hover {
              background: #ff9500;
              color: #fff;
            }
          }
        }
      }
    }
    .search-content-gift {
      .gift-box {
        width: calc(100% - 107px);
        padding: 10px 0 0 5px;
        height: 105px;
        box-sizing: border-box;
        h5 {
          line-height: 40px;
          font-size: 22px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          a:hover {
            color: red;
            text-decoration: underline;
          }
        }
        p {
          height: 16px;
          margin-bottom: 8px;
          span {
            float:left;
            height: 100%;
            line-height: 16px;
            & + span {
              margin-left: 6px;
            }
          }
          .progress {
            width: 80%;
            background: #f3f3f3;
            border-radius: 8px;
            em {
              float:left;
              height: 100%;
              border-radius: 8px;
              width: 34%;
              background: #099cda;
            }
          }

        }
        .get-gift {
          float: left;
          height: 26px;
          padding: 2px 10px;
          line-height: 26px;
          text-align: center;
          background: #3bb70b;
          font-size: 14px;
          color: #fff;
        }
      }
    }

    .search-content-info {
      div {
        height: calc(100% - 20px);
        width: calc(50% - 15px);
        margin: 10px;
      }
      .img-show {

        a {
          display: block;
          height: 100%;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .info-brief {
        margin-left: 0;
        h5 {
          line-height: 30px;
          max-height: 60px;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 18px;
          a:hover {
            color: red;
            text-decoration: underline;
          }
        }
        p {
          color: #b2b2b2;
          line-height: 26px;
          font-size: 14px;
        }
      }
    }
  }
}
